<template>
<div>
    <h1 class="tit">订单概述</h1>
        <el-row>
        <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24">
            <el-card class="order_box_card">
                <div slot="header">
                    <div class="icon">
                        <svg-icon icon-class="order"></svg-icon>
                    </div>
                    <div class="icon-title">
                        <h3>本月有效订单金额（元）</h3>
                        <h1>{{ rate.rate }}</h1>    
                    </div>
                </div>
                <ul>
                <li v-for="(item,index) in rate.passage" class="order-list" :key="index">
                    <svg-icon :icon-class="item.icon" :class="item.icon"></svg-icon>
                    <span>{{ item.name }}</span>
                    <h4>{{ item.money }}</h4>
                </li>
                </ul>
            </el-card>
        </el-col>
        <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24">
            <el-card class="order_box_card top">
                <div slot="header">
                    <div class="icon">
                        <svg-icon icon-class="order"></svg-icon>
                    </div>
                    <div class="icon-title">
                        <h3>上月有效订单金额（元）</h3>
                        <h1>{{ rateLevel.rate }}</h1>
                    </div>
                </div>
                <ul>
                <li v-for="(item,index) in rateLevel.passage" class="order-list" :key="index">
                    <svg-icon :icon-class="item.icon" :class="item.icon"></svg-icon>
                    <span>{{ item.name }}</span>
                    <h4>{{ item.money }}</h4>
                </li>
                </ul>
            </el-card>
        </el-col>
        </el-row>
</div>
</template>
<script>
export default {
  name: 'Order',
  props: {
    rate: {
      type: Object,
      required: true
    },
    rateLevel: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
    @import './../../index.scss';
</style>

